<template>
    <div class="app-container">

      <el-row :gutter="20" style="margin-bottom: 20px;">

        <el-col :span="5">
          <p style="color: #989A9A;">订单号</p>
          <el-input placeholder="输入订单号" v-model="searchParam.uuid" @keyup.enter.native="getList('search')"></el-input>
        </el-col>

        <el-col :span="4">
          <p>&nbsp;</p>
          <el-button type="danger" @click="getList('search')">搜索</el-button>
        </el-col>

      </el-row>

      <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
                highlight-current-row>
        
        <el-table-column align="center" prop="id" label="id" width="160" sortable></el-table-column>
        <el-table-column align="center" prop="uuid" label="订单号" width="160" sortable></el-table-column>

        <el-table-column align="center" prop="shouldPay" label="应付金额" width="160" :formatter="shouldPayFormatter">
        </el-table-column>

        <el-table-column align="center" prop="realPay" label="实付金额" width="160" :formatter="realPayFormatter">
        </el-table-column>

        <el-table-column align="center" prop="change" label="找零" width="160" :formatter="changeFormatter">
        </el-table-column>
        
        <el-table-column align="center" prop="date" label="时间" style="width: 60px;" sortable></el-table-column>

        <el-table-column align="center" prop="payWay" label="支付方式" style="width: 60px;" :formatter="payWayFormatter"></el-table-column>

        <el-table-column align="center" prop="status" label="支付状态" width="160" sortable :formatter="statusFormatter"></el-table-column>

      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :total="totalCount"
        layout="prev, pager, next">
      </el-pagination>
      
      
  </div>
</template>

<script>
export default {
    data() {
      return { //分页组件--数据总条数
        list: [],
        listLoading: false,//数据加载等待动画
        listQuery: {
          pageNum: 1,//页码
          pageSize: 15,//每页条数
        },
        searchParam: {
          uuid: ''
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      payWayFormatter(row, column) {
        switch(row.payWay) {
            case 0: return '在线支付'
            case 1: return '现金支付'
        }
      },
      statusFormatter(row, column) {
        switch(row.status) {
          case 0: return '已完成'
          case 1: return '进行中'
          case 2: return '暂缓'
        }
      },
      shouldPayFormatter(row, column) {
        return '￥' + row.shouldPay
      },
      realPayFormatter(row, column) {
          return '￥' + row.realPay
      },
      changeFormatter(row, column) {
          return '￥' + row.change
      },
      async getList(search) {
        //查询列表
        if (!this.hasPerm('payment:list')) {
          return
        }
        this.listLoading = true
        const res = (search && search === 'search') ? 
          await this.$api.payment.search(this.listQuery.pageSize, this.listQuery.pageNum, this.searchParam) : 
          await this.$api.payment.list(this.listQuery.pageSize, this.listQuery.pageNum, true)
        this.listLoading = false
        this.list = res.data.data
        this.totalCount = res.data.total
      },
      handleSizeChange(val) {
        //改变每页数量
        this.listQuery.pageRow = val
        // this.handleFilter();
      },
      handleCurrentChange(val) {
        //改变页码
        this.listQuery.pageNum = val
        this.getList();
      },
    }
}
</script>

<style>

</style>
